<template>
  <div class="app">
    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
    <nav class="tabbar" v-if="$route.path !== '/Xc40'">
      <router-link to="/" class="tabbar-item">
        <span class="tabbar-text">首页</span>
      </router-link>
      <router-link to="/GroupButton" class="tabbar-item">
        <span class="tabbar-text">按钮组</span>
      </router-link>
      <router-link to="/avatar" class="tabbar-item">
        <span class="tabbar-text">头像</span>
      </router-link>
      <router-link to="/badge" class="tabbar-item">
        <span class="tabbar-text">徽标</span>
      </router-link>
      <router-link to="/button" class="tabbar-item">
        <span class="tabbar-text">按钮</span>
      </router-link>
    </nav>
  </div>
</template>

<script setup>
// 组件逻辑
</script>

<style lang="scss">
@import './styles/index.scss';

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 100vw;
  overflow-x: hidden;
}

.main {
  flex: 1;
  padding: 0;
}

.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 56px;
  background: $color-white;
  box-shadow: $shadow-bottom;
  padding-bottom: env(safe-area-inset-bottom);

  &-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: $color-gray;
    text-decoration: none;
    font-size: $font-size-sm;
    padding: $spacing-sm;

    &.router-link-active {
      color: $color-primary;
    }
  }

  &-text {
    margin-top: $spacing-xs;
  }
}

</style>
